<template>
  <view>
    <!-- 聊天头部 -->
    <view class="navbar">
      <view class="back" @tap="scaleToFill">
        <uni-icons type="back" size="25"></uni-icons>
      </view>
      <view class="title">{{ userB }}</view>
      <uni-icons type="person-filled" size="25"></uni-icons>
    </view>
    <!-- 聊天列表 -->

    <scroll-view
      scroll-y="true"
      scroll-with-animation="true"
      class="scroll-view"
      :style="'height:' + scrollH + 'px;'"
      :scroll-into-view="scrollInto"
      scroll-with-aniamtion-
    >
      <block v-for="(item, index) in list1.list" :key="{ index }">
        <view :id="'chat' + index">
          <unichar
            :item="item"
            :index="index"
            :pretime="index > 0 ? list1.list[index - 1].time : 0"
          ></unichar>
        </view>
        <!-- 右边的聊天列表 -->
        <!-- <view class="ltiao" style="flex-direction: row-reverse">
          <image
            :src="item.imgae"
            mode="scaleToFill"
            style="width: 80rpx; height: 80rpx"
            class="tupian"
          />
          <view style="max-width: 400rpx; min-width: 100rpx" class="neiron1">{{ item.content }}</view>
        </view>-->
      </block>
    </scroll-view>

    <!-- 底部操作条 -->
    <view class="dibu">
      <view hover-class="yans-hover1" class="yans1">
        <UniIcons type="mic-filled" size="25" @tap="scaleToFill" />
      </view>
      <input placeholder="文明发言" class="input" v-model="content" @confirm="sumbit" />
      <view hover-class="yans-hover" class="yans" @tap="sumbit">
        <UniIcons type="paperplane" size="25" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import unichar from '@/pagesA/socketliao/comp/liaotianjiem/neiron/index.vue'
import UniIcons from '@/components/uni-icons/uni-icons'
import { liaotianAPI, liaotianneironAPI } from '@/services/liaotian'
import { ref, computed, getCurrentInstance, toRaw } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { myStore } from '@/stores'
import { formatMessageDate, formatTime, getChatTime } from '@/composables/time'
import socket from '../../../../composables/websocket'
// 这个获取全局属性，该函数用于获取当前实例的proxy属性。proxy属性提供了一些方法，用于方便地访问实例的数据和方法。
const { proxy } = getCurrentInstance()
//也可以直接引入socket  直接用，
// socket.emit('message', 123)
// socket.on('message', (data) => {
//   console.log(data)
// })
//也可以用proxy.socket.emit('message', 123)

// 要和 uni.navigateTo配合使用  这里返回上一页面
const scaleToFill = () => {
  // 退掉消息
  proxy.socket.emit('message3', userA.userinfo.id)
  uni.navigateBack({
    delta: 1,
  })
}
// 聊天列表  高度测试
const scrollH = ref(500)
// 对方id  和对方 姓名
const userB = ref('')
const toid = ref(1)
onLoad(async (options) => {
  uni.getSystemInfo({
    success: (res) => {
      console.log(res.windowHeight)

      scrollH.value = res.windowHeight - uni.upx2px(200)
    },
  })
  // // 监听键盘高度
  // uni.onKeyboardHeightChange((res) => {
  //   console.log(res.height)
  // })
  console.log(options, '22222222222')
  // 给予 toid值
  toid.value = Number(options.toid)
  userB.value = options.name
})
let li1 = 0
let socketId = ref('')
const data1 = ref('')
onShow(async () => {
  proxy.socket.emit('login', userA.userinfo.id)
  // 刷新聊天内容
  const res = await liaotianneironAPI(userA.userinfo.id, toid.value)
  console.log(res.data, '聊天内容')

  list1.value.list = res.data
  li1 = list1.value.list.length
  console.log(list1.value.list)
  proxy.socket.on('message2', (userB, toA, data) => {
    console.log(data)
    data1.value = data
    data.uid = 2
    list1.value.list.push(data)
    pageToBottom()
  })
  console.log(data1.value, '构建55555555555555')

  // console.log(toRaw(data2.value), '888888888888888888')  用foreach循环
  proxy.socket.emit('message1', {
    toid: res.data[res.data.length - 1].userid,
    content: res.data[res.data.length - 1].content,
    userid: res.data[res.data.length - 1].toid,
  })

  // 滚动底部
  pageToBottom()
})
// 计算左边还是右边

//聊天内容需要数据
// 时间搓算法
const time = ref<string>(formatTime(new Date()))
// 动态数据
const list1 = ref({
  list: [],
})

// const fason = (index) => {
//   console.log(index)

//   if (index > 0 && list1.value.list[index] && list1.value.list[index - 1]) {
//     shoutime.value = getChatTime(list1.value.list[index].time, list1.value.list[index - 1].time)
//   } else if (list1.value.list[index]) {
//     shoutime.value = getChatTime(list1.value.list[index].time, 0)
//   } else {
//     shoutime.value = '' // Or handle the scenario where list1.value.list[index] is undefined
//   }

//   return shoutime.value ? true : false
// }
// 底部数据
// 数据变量
const content = ref('')
// 点击触发事件  发送
const userA = myStore()

let li
const sumbit = () => {
  console.log(li1, '小1')
  let obj = {
    uid: 1,
    userid: userA.userinfo.id,
    toid: toid.value,
    name: userA.userinfo.username,
    time: new Date().getTime(),
    content: content.value,
    imgae: userA.userinfo.picAddress,
    type: 'text',
    xiaoxiztai: false,
  }
  if (content.value === '') {
    return uni.showToast({
      title: '内容不能为空',
      icon: 'error',
      mask: true,
    })
  }

  list1.value.list.push(obj)
  let li2 = list1.value.list.length
  console.log(li2, '小2')

  li = li2 - li1
  console.log(li, '个数')

  // 发送消息
  proxy.socket.emit('message', obj)
  content.value = ''
  // proxy.scoket.emit('message5', { li3: li, content1: content.value })
  console.log(obj, '自己id和对方id')

  pageToBottom()
}
// 滚动到底部的消息事件
const scrollInto = ref('')
const pageToBottom = () => {
  let lastindex = list1.value.list.length - 1

  scrollInto.value = 'chat' + lastindex
}
</script>

<style scoped lang="scss">
.navbar {
  height: 44px;
  background-color: #f0eaea;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;

  position: relative;
}
.back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  text-align: center;
  position: absolute;
  left: 45%;
}
// 底部
.dibu {
  height: 100rpx;
  width: 100%;
  display: flex;

  align-content: center;
  border-top: #e8e8e8 1px solid;
  position: absolute;
  bottom: 0rpx;
  padding: 0 10px;
  background-color: #e8e8e8;

  .input {
    width: 75%;
    height: 100%;
    border-radius: 20rpx;
    background-color: #fff;
    padding: 0 10px;
    margin-right: 10px;
    border: 1px solid #e8e8e8;
  }
  .yans {
    position: relative;

    width: 15%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f5ef;
    border-radius: 100rpx;
    border: 1px solid #e8e8e8;
  }
  .yans-hover {
    background-color: #d0ead7;
  }
  .yans1 {
    position: relative;

    width: 10%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 100rpx;
    border: 1px solid #e8e8e8;
  }
  .yans-hover1 {
    background-color: #d0ead7;
  }
}
// 内容
.ltiao {
  display: flex;
  align-content: start;
  padding: 20rpx;
  .tupian {
    // 变圆角
    border-radius: 100%;
  }
  // 左边聊天内容
  .neiron {
    height: 70%;
    text-align: center;
    font-size: 30rpx;
    color: #131212;
    margin: 40rpx;
    //  变椭圆形4个角

    border-radius: 10rpx 20rpx 30rpx 30rpx;
    background-color: #a8a5a5;
    padding: 20rpx;
  }
  // 右边聊天内容
  .neiron1 {
    height: 70%;
    text-align: center;
    font-size: 30rpx;
    color: #131212;
    margin: 40rpx;
    //  变椭圆形4个角

    border-radius: 20rpx 10rpx 30rpx 30rpx;
    background-color: #a8a5a5;
    padding: 20rpx;
  }
  .time {
    text-align: center;
    font-size: 15rpx;
    margin: 30rpx, 0rpx;
    color: #b4acac;
    // 垂直居中
    display: flex;
    align-items: center;
  }
}
.time {
  text-align: center;
  font-size: 20rpx;
  margin: 30rpx, 0rpx;
  color: #b4acac;
  // 垂直居中
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
